<div class="app-content-body ">
	<div class="bg-light lter b-b wrapper-md hidden-print">
		<h1 class="m-n font-thin h3">权限管理</h1>
	</div>

	<div class="form_title">
		<div class="my_hd edit-type avatarImg" id="user-image"></div>
		<div class="crud-container crud-reset">
			<form id="form-container">
				<div class="row">
					<div class="col-sm-12 col-md-12 col-lg-12" style="margin-bottom:10px">
						<div class="col-sm-4 col-md-4 col-lg-4 text-left" style="padding: 0;">
							<div id="open"></div>
							<div id="close"></div>
						</div>

						<div class="col-sm-2 col-md-2 col-lg-2"></div>
						<div class="col-sm-6 col-md-6 col-lg-6 " style="padding: 0;">

							<div id="select" class="pull-right" style="width: 20%;"></div>
							<div class="pull-right" id="search" style="width: 50%;overflow:auto;"></div>
						</div>

					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<div id="form"></div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12 text-right" style="margin-top: 15px;">
						<div id="cancel"></div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		$("#content").one("route.loaded", function(e, context) {
			var id = context.params.id,
				filter = [],
				store = $.crudStore(API('user-relation?user_id=' + id), {
					onLoading: function(loadOptions) {
						loadOptions.filter = filter;
					}
				});

			$(function() {
				var data = null;
				$.get(
					$.config('apiUrl') + "user/" + id
				).then(
					function(datas) {
						if(datas.success) {
							data = datas.data;
							if(data.nickname == null) {
								$("#user-image").text("查看");
								return
							};

							if(data.avatar == null) {
								$("#user-image").html(
									"<span >" + data.nickname + "</span>"
								)
							} else {
								$("#user-image").html("<img src='" + data.avatar + "'><span >" + data.nickname + "</span>").find("img").css({
									"vertical-align": "-14px",
									"margin": "0 8px"
								})

							}
						} else {
							$("#user-image").text("请求当前用户信息失败")
						}
					}
				);

			})



			$("#select").dxSelectBox({
				dataSource: new DevExpress.data.DataSource({
					store: $.crudStore(API('project-category'))
				}),
				showClearButton: true,
				placeholder: "分类",
				searchEnabled: false,
				valueExpr: 'id',
				displayExpr: 'name',
				itemTemplate: function(data) {
					return data.name
				},
				onValueChanged: function(e) {
					var search = $("#search input").val();
					filter = ['user.project_category', '=', e.value];
					var ds = $("#form").dxDataGrid('option', 'dataSource');
					ds.searchValue(search);
					ds.reload();
				}
			} );

			$("#form").dxDataGrid({
				dataSource: new DevExpress.data.DataSource({
					store: store,
					searchExpr: 'nickname'
				}),
				placeholder: '昵称',
				search: {
					mobile: 'nickname',
				},
				columns: [{
					dataField: "avatar",
					caption: '会员头像',
					allowFiltering: false,
					allowSorting: false,
					cssClass: 'avatarImg',
					cellTemplate: function(container, options) {
						$("<div>").append($("<img>", {
							"src": options.value
						})).appendTo(container);

					}
				}, {
					dataField: "nickname",
					caption: '会员昵称'
				}, {
					dataField: "username",
					caption: '会员姓名'
				}, {
					dataField: "mobile",
					caption: '会员手机号码'
				}, {
					dataField: "link_origin",
					caption: '来源',
					cellTemplate: function(container, options) {
						var pas = options.data.link_origin == "admin" ? "管理员" : "项目"
						$("<div>").text(pas).appendTo(container)
					}
				}, {
					dataField: "has_link",
					caption: '状态',
					cellTemplate: function(container, options) {
						var pas = options.data.has_link ? "已开通" : "已关闭";
						var pcss = options.data.has_link ? "green" : "red";
						$("<div>").text(pas).css("color", pcss).appendTo(container)
					}
				}, {
					dataField: "has_link",
					caption: '操作',
					cellTemplate: function(container, options) {
						var ass = options.data.has_link ? "关闭" : "开通";
						var pas = (function() {
							if(options.data.has_link) {
								return "close"
							} else {
								return "open"
							}
						})();
						var off = function() {
							if(options.data.has_link) {
								return "确认关闭吗？"
							} else {
								return "确认开通吗"
							}
						}

						$("<a>").text(ass).click(function() {
							DevExpress.ui.dialog.confirm(off(), "请确认").done(function(dialogResult) {
								if(dialogResult) {
									$.post($.config('apiUrl') + "user-relation", {
											"user_id": id,
											"to_user_id": options.data.id,
											"type": 2,
											"action": pas
										},
										function(result) {
											if(result.success) {
												DevExpress.ui.notify({
														message: function() {
															var gridComponent = $("#form").dxDataGrid('instance')
															gridComponent.option("dataSource").reload();
															if(result.success) {
																var ptt = pas == "open" ? "开通成功" : "关闭成功"
																return ptt
															}
														},
													},
													"success", 1000)
											} else {
												DevExpress.ui.notify({
														message: "请求失败",
													},
													"warning", 1000)
											};
										});
								}
							})

						}).appendTo(container)
					}
				}]
			});

			$("#open").dxButton({
				text: "开通所有",
				type: "normal",
				onClick: function() {
					var search = $("#search input").val();
					var ds = $("#form").dxDataGrid('option', 'dataSource');
					var selectValue = $("#select").dxSelectBox('option', 'value');
					ds.searchValue(search);
					var param = {
						"sort": null,
						"group": null,
						"requireTotalCount": true,
						"filter": ["user.project_category", "=", selectValue],
						"searchOperation": "contains",
						"searchValue": search,
						"searchExpr": "nickname",
						"skip": 0,
						"take": 10,
						"userData": {}
					}
					var param = JSON.stringify(param);
					$.post($.config('apiUrl') + "user-relation-change?user_id=" + id + "&type=2&action=open&_param=" + param).then(function(data) {
						if(data.success) {
							ds.reload();
							DevExpress.ui.notify({
								message: function() {
									return "成功开通" + data.data.total + "位用户"

								}
							}, "success", 1000)
						} else {

							DevExpress.ui.notify({
									message: "请求失败"
								},
								"warning", 1000)

						}
					})

				}
			});
			$("#close").dxButton({
				text: "关闭所有",
				type: "normal",
				onClick: function() {
					var search = $("#search input").val();

					var ds = $("#form").dxDataGrid('option', 'dataSource');
					var selectValue = $("#select").dxSelectBox('option', 'value');
					ds.searchValue(search);
					var param = {
						"sort": null,
						"group": null,
						"requireTotalCount": true,
						"filter": ["user.project_category", "=", selectValue],
						"searchOperation": "contains",
						"searchValue": search,
						"searchExpr": "nickname",
						"skip": 0,
						"take": 10,
						"userData": {}
					}
					var param = JSON.stringify(param);
					$.post($.config('apiUrl') + "user-relation-change?user_id=" + id + "&type=2&action=close&_param=" + param).then(function(data) {
						if(data.success) {
							ds.reload();
							DevExpress.ui.notify({
								message: function() {
									return "成功关闭" + data.data.total + "位用户"

								}
							}, "success", 1000)
						} else {

							DevExpress.ui.notify({
									message: "请求失败"
								},
								"warning", 1000)

						}
					})

				}
			});

			$("#search").html(
				"<input type='text' class='input-sm form-control pull-right' placeholder='请输入昵称' style='min-height:36px;width:80%;border:1px solid #dee5e7'>"
			);

			$("#select").before(
				"<button type='button' class='btn btn-sm btn-default pull-right' style='min-height:36px;width:20%'>搜索</button>"
			);

			$("#search").parent().find("button").click(function() {
				var search = $("#search input").val();
				filter = [
					'user.project_category', '=', $("#select").dxSelectBox('option', 'value')
				];
				var ds = $("#form").dxDataGrid('option', 'dataSource');
				ds.searchValue(search);
				ds.reload();
			});

			$("#cancel").dxButton({
				text: "返回",
				type: "normal",
				onClick: function() {
					context.redirect("#/vip-authority");
				}
			});

		});
	});
</script>
